<template>
  <header v-if="headerInfo.show">
    <div class="weather">
      <!--      雨.png-->
      <!--      多云.png-->
      <!--      晴.png-->
      <!--      雪.png-->
      <div class="ico">
        <img :src="'./images/' + headerInfo.weatherInfo.weatherType + '.png'" alt="">
      </div>
      <!--      <div class="ico"><img :src="`/images/${headerInfo.weatherType}.png`" alt=""></div>-->
      <div class="txt">
        <span class="c1">{{headerInfo.weatherInfo.weartherContent}}</span>
        <span class="c2">{{headerInfo.weatherInfo.temperature}}°C</span>
      </div>
    </div>
    <div class="tit">
      <div class="ico ico-l">
        <img src="../assets/images/ico-banner.png" alt="">
        <div class="items">
          <i v-for="(n,index) in hList" :key="index" :class="[hList[index].active ? 'active': '']"></i>
        </div>
      </div>
      <div class="ico ico-r">
        <img src="../assets/images/ico-banner.png" alt="">
        <div class="items">
          <i v-for="(n,index) in hList" :key="index" :class="[hList[index].active ? 'active': '']"></i>
        </div>
      </div>
      <h1>{{headerInfo.name}}</h1>
    </div>
    <div class="time">
      <span class="d">{{curDate}}</span>
      <span class="t">{{curTime}}</span>
    </div>
  </header>
</template>

<script>
import { formatDate } from '@/utils/dateformat'

export default {
  name: 'headbar',
  props: {},
  data () {
    return {
      date: new Date(),
      num: 34,
      curNum: -1,
      headTiming: 50,
      hList: []
    }
  },
  components: {},
  computed: {
    headerInfo () {
      return this.$store.state.headerInfo
    },
    curDate () {
      return formatDate(this.date, 'yyyy-MM-dd')
    },
    curTime () {
      return formatDate(this.date, 'hh:mm:ss')
    }
    // numClass () {}
  },
  mounted () {
    const that = this
    that.timer = setInterval(() => {
      that.date = new Date()
    }, 1000)
    for (var i = 0; i < that.num; i++) {
      that.hList.push({ active: false })
    }
    // console.log('that.hList', that.hList)
    that.headTime = setInterval(() => {
      if (that.curNum === that.num - 1) {
        that.curNum = 0
      } else {
        that.curNum++
      }
      // console.log(that.curNum)
      if (that.hList.length > 0 && that.hList[that.curNum]) {
        that.hList[that.curNum].active = !that.hList[that.curNum].active
      }
    }, that.headTiming)
  },
  methods: {},
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.headTime) {
      clearInterval(this.headTime)
    }
  }
}
</script>

<style lang="scss" scoped></style>
